<template>
  <div class="joe_main">
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="article" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              文章数
            </div>
            <count-to :start-val="0" :end-val="statisticsTopNumData.articleCount" :duration="2600"
                      class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="articleSort" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              分类数
            </div>
            <count-to :start-val="0" :end-val="statisticsTopNumData.sortCount" :duration="3200" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="articleLable" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              标签数
            </div>
            <count-to :start-val="0" :end-val="statisticsTopNumData.lableCount" :duration="3600"
                      class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="like" class-name="card-panel-icon"/>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              点赞数
            </div>
            <count-to :start-val="0" :end-val="statisticsTopNumData.likeCount" :duration="3000" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="joe_wallpaper__type">
      <div class="joe_wallpaper__type-title">标签</div>
      <ul class="joe_wallpaper__type-list">
        <template v-for="item in articleLableList">
          <router-link
            :to="'/articleLableList/'+item.id"
          >
            <li :style="{background: getColor()}" class="item animated swing" data-cid="36">
              {{ item.name }}
            </li>
          </router-link>
        </template>
      </ul>
    </div>

    <div class="joe_census__filing" style="margin-bottom: 20px">
      <div class="title">
        <a-month-picker :default-value="moment(new Date(), 'YYYY-MM')" format="YYYY-MM" @change="changeData"/>
      </div>
      <div class="content">
        <div id="articleStatistics" style="width:100%;height: 400px;"/>
      </div>
    </div>

    <div class="joe_census__filing">
      <div class="title">文章归档</div>
      <div class="content">
        <div id="filing">
          <template v-for="(item,index) in archiveData">
            <div class="item">
              <div class="tail"></div>
              <div class="head"></div>
              <div class="wrapper">
                <div class="panel" @click="clickArchiveList(index)">
                  {{ formatCreateMonth(item.createMonth) }}
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M21.6 772.8c28.8 28.8 74.4 28.8 103.2 0L512 385.6l387.2 387.2c28.8 28.8 74.4 28.8 103.2 0 28.8-28.8 28.8-74.4 0-103.2L615.2 282.4l-77.6-77.6c-14.4-14.4-37.6-14.4-51.2 0l-77.6 77.6L21.6 669.6c-28.8 28.8-28.8 75.2 0 103.2z"></path>
                  </svg>
                </div>
                <ol class="panel-body"
                    :style="clickArchiveItemKey === index ? 'display: block;' : 'display: none;'">
                  <template v-for="data in item.data">
                    <li>
                      <router-link rel="noopener noreferrer" target="_blank" :to="'/articleDetails/'+data.id">
                        {{ formatCreateTime(data.createTime) }}：{{ data.title }}
                      </router-link>
                    </li>
                  </template>
                </ol>
              </div>
            </div>
          </template>
        </div>
        <!--        <div class="item load">-->
        <!--          <div class="tail"></div>-->
        <!--          <div class="head"></div>-->
        <!--          <button class="button">加载更多</button>-->
        <!--        </div>-->
      </div>
    </div>

  </div>

</template>

<script>
import {getAction} from '@/api/manage'
import {ellipsis} from '@/utils/util'
import CountTo from 'vue-count-to'
import echarts from 'echarts'
import AntsDate from '@/components/ants/AntsDate'
import moment from 'moment'

export default {
  name: 'ArticleArchive',
  components: {
    AntsDate,
    CountTo
  },
  props: {
    isArchive: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      url: {
        list: '/article/articleGroupByCreateTime',
        getArticleByTime: '/article/getArticleByTime',
        articleStatisticsLineChart: '/article/articleStatisticsLineChart',
        statisticsTopNum: '/article/statisticsTopNum',
        initArticleLable: '/articleLable/list'
      },
      archiveData: [],
      articleStatisticsData: [],
      statisticsTopNumData: {},
      customStyle:
        'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden',
      chart: null,
      clickArchiveItemKey: -1,
      articleLableList: []
    }
  },
  mounted() {
    this.getData()
    this.initArticleStatistics('')
    this.initStatisticsTopNum()
    this.initArticleLable()
  },
  methods: {
    moment,
    // 获取随机色
    getColor() {
      let r = parseInt(Math.random() * 256)
      let g = parseInt(Math.random() * 256)
      let b = parseInt(Math.random() * 256)
      let color = `rgba(${r},${g},${b},0.4)`
      return color
    },
    initStatisticsTopNum() {
      getAction(this.url.statisticsTopNum, {}).then(res => {
        if (res.success) {
          this.statisticsTopNumData = res.result
        }
      })
    },
    async getData() {
      await getAction(this.url.list, {}).then(res => {
        if (res.success) {
          this.archiveData = res.result
        }
      })
    },
    async getArticleByTime(time) {
      await getAction(this.url.getArticleByTime, {'time': time}).then(res => {
        if (res.success) {
          return res.result.records
        }
      })
    },
    formatCreateTime(createTime) {
      let date = new Date(createTime)
      return date.getMonth() + 1 + '/' + date.getDate()
    },
    formatCreateMonth(createMonth) {
      let date = new Date(createMonth)
      return date.getFullYear() + ' 年 ' + (date.getMonth() + 1) + ' 月 '
    },
    initArticleStatistics(month) {
      getAction(this.url.articleStatisticsLineChart, {'month': month}).then(res => {
        if (res.success) {
          this.articleStatisticsData = res.result
          this.initLineChart()
        }
      })
    },
    initLineChart() {
      this.chart = echarts.init(document.getElementById('articleStatistics'))
      const option = {
        color: ['#91cc75', '#fac858', '#73c0de', '#ea7ccc'],
        // title: {
        //   articleBody: '详细统计'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['文章数', '阅读数', '收藏数', '点赞数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '文章数',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '阅读数',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '收藏数',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '点赞数',
            type: 'line',
            stack: 'Total',
            data: []
          }
        ]
      }
      this.articleStatisticsData.forEach(item => {
        option.xAxis.data.push(item.month)
        option.series[0].data.push(item.articleNum)
        option.series[1].data.push(item.viewsNum)
        option.series[2].data.push(item.collectNum)
        option.series[3].data.push(item.likesNum)
      })

      this.chart.setOption(option)
      let _this = this
      // 浏览器大小改变时重置大小
      window.onresize = function () {
        _this.chart.resize()
      }

      // 容器大小改变时重置大小
      this.$nextTick(() => {
        _this.chart.resize()
      })
    },
    changeData(mom, dateStr) {
      this.initArticleStatistics(dateStr)
    },
    clickArchiveList(key) {
      if (this.clickArchiveItemKey === key) {
        this.clickArchiveItemKey = -1
      } else {
        this.clickArchiveItemKey = key
      }
    },
    // 初始化文章标签
    initArticleLable() {
      getAction(this.url.initArticleLable, {
        'username': ''
      }).then(res => {
        if (res.success) {
          this.articleLableList = res.result.records
        }
      })
    }
  }
}
</script>

<style>
.ant-collapse-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #606266;
  cursor: pointer;
  background: #f2f6fc;
  height: 40px;

}

.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content {
  background-color: white;
  border-top: 0;
}

.list-title {
  color: #606266;
}
</style>
<style lang="scss" scoped>
.panel-group {
  margin-top: 10px;

  .card-panel-col {
    margin-bottom: 20px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
